<!--
 * @Description: 首页右侧
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-04-12 17:48:20
-->
<template>
	<div v-if="show" class="home_right shadow">
		<div v-if="list.length">
			<div v-for="(item,index) in list" :key="index" :style="height(item.height)">
				<div v-if="item.name=='iframe'">
					<iframe class="iframe" frameborder="0" seamless :src="item.url"></iframe>
				</div>
				<div v-else-if="item.data&&item.data.graphicalCss=='table-basic'" style=" position: relative;height:100%;width:100%;">
					<div class="changemodule" @click="changeleft(index)">
						<i style="font-size: 20px; " class="el-icon-more"></i>
					</div>
					<Table :data="item.data"></Table>
				</div>
				<div v-else-if="item.data" style=" position: relative;height:100%;width:100%;">
					<div class="changemodule" @click="changeleft(index)">
						<i style="font-size: 20px; " class="el-icon-more"></i>
					</div>
					<Echart1 :data="item.data" :name="'top'+index+item.data.id"></Echart1>
				</div>
				<!-- <Index :name="item.name" :src="item.url"></Index> -->
			</div>
		</div>
		<div v-if="!list.length" style="height:calc(100vh - 70px);text-align:center;display:flex;align-items: center;justify-content: center;">
			<img src="@/assets/nodata.png" />
		</div>
	</div>
</template>

<script>
/*引入scss里的变量*/
import Echart1 from '@/views/platform/ICPS/board/components/echart1.vue';
import Table from '@/views/platform/ICPS/board/components/table.vue';
import { source_page } from "@/api/board/datashow.js";
/*全局调用*/
export default {
	components: {
		Echart1,
		Table
	},
	props: {
		list: {
			type: Array,
		},
	},
	data() {
		return {
			echarts: [],
			fromData: {
				page: 1,
				pageSize: 9999
			},
			show: false
		}
	},
	async	created() {
		let _this = this
		await source_page(_this.fromData).then(res => {
			res.data.data.forEach(res => {
				res.dataField = JSON.parse(res.dataField)
				res.colorCss = JSON.parse(res.colorCss)
			})
			_this.echarts = res.data.data
		})
		await _this.list.forEach(res => {
			res.data = _this.toJSON(res.data)
		})
		_this.$nextTick(() => {
			_this.show = true
		})
	},

	methods: {
		changeleft(index) {
			this.$emit('changemodule1', index)
		},
		toJSON(data) {
			let id = ''
			if (typeof(data) === 'object') {
				id = data.id
			} else {
				id = JSON.parse(data).id
			}
			let item = this.echarts.find(res => (res.id == id))
			return item
		},
		height(height) {
			return 'height:' + height + ';';
		}
	}
};
</script>
<style lang="scss" scoped>
.home_right {
  background: #ffffff;
  overflow: hidden;
  border-radius: 4px;
  height: 100%;
  .changemodule {
    width: 50px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    line-height: 30px;
    text-align: center;
    top: 0px;
    right: 0px;
    z-index: 99;
  }
  > div {
    width: 100%;
    overflow: hidden;
    > div {
      height: 100%;
      width: 100%;
    }
  }
  > div:first-child {
    padding: $px_24 $px_24 12px $px_24;
  }

  > div:nth-child(2) {
    padding: 12px $px_24 12px $px_24;
  }

  > div:nth-child(3) {
    padding: 12px $px_24 $px_24 $px_24;
  }
  .iframe {
    height: 100%;
    width: 100%;
  }
}
</style>
